<template>
<view class="page"> 
	<template>
		<!-- <view class="h45">
			<view class="fix-wrap">
				<view class="h45 search-bar">
					<view class="search-form">
						<view class="icon sc-icon iconfont">&#xe60f;</view>
						<input type="text" v-model="keyword" class="sc-inp"  placeholder="输入关键词搜索" @confirm="search">
						<view v-if="keyword" class="icon clear-btn iconfont icon-shanchu" @click="clearKeyword"></view>
					</view>
				</view> 
			</view>
		</view> -->
		<view class="body">
			<template >
				<view class="list-wrap">				
					<template >
						<template v-if="true"> 		 
							<view class="item" v-for="(item,index) in list" :key="index"> 
								<view class="info">									
									<view class="name">{{item.service_type}}</view>
									<view class="params">
										<view class="text"><text class="label">品 种：</text><text>{{item.plant}}</text></view>   
									</view>
									<view class="params"> 
										<view class="text"><text class="label">服务时间：</text><text>{{item.service_date}}</text></view>  
									</view>
									<view class="params">  
										<view class="text"><text class="label">发生面积：</text><text>{{item.area}}</text></view>
									</view> 
									<view class="params">
										<view class="text"><text class="label">地 址：</text><text>{{item.address}}</text></view>  
									</view>
									<view class="params">
										<view class="text"><text class="label">问题描述：</text><text>{{item.problem}}</text></view>  
									</view>
								</view>
							</view> 
							
							<!-- <c-loading :loadingState="loadingState"></c-loading> -->
						</template>
						<template v-else>
							<c-empty msg="暂无信息"></c-empty>
						</template>
						
					</template>
					 
					
				</view>
			</template> 
		</view>
		
		<view class="footer">
			<navigator url="/pages/apply/apply" hover-class="none" class="fix-wrap">
				<view class="btn">
					<view class="f-s32">申请</view> 
				</view>	
			</navigator>
		</view>	
		
		
		  
	</template>
	  
</view>
</template>

<script> 
 
import {HTTP_REQUEST_URL} from '@/config.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			userInfo:uni.getStorageSync('userInfo'), 
			loadingState:{
				default:true,
				loading:false,
				compelted:false
			}, 
			list:[], 
			page:1,
			total:0, 
			keyword:'',
			http_request_url:HTTP_REQUEST_URL,
			type:1
		}
	},
	onShow() {
		
	},
	onReachBottom(){
		if(this.loadingState.completed){ 
			this.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.page++; 
				this.serviceindex(); 
			} 
		}	 
	},
	async onLoad(params) { 
		this.serviceindex(); 
		
		 
		
	},
	methods:{		 
		
		// 获取列表
		serviceindex:async function(){
			let res=await this.$api.user_api.serviceindex(); 
			if(res.data.code==0){ 
				this.list=this.list.concat(res.data.data.list);				 
			} 
		},
		 
		 
		
		// 清空搜索词
		clearKeyword:function(){
			this.keyword='';
			this.fkinfolist();  
		},
		
		 
		// 搜索
		search:function(){
			this.dataInit();
			if(this.type==1){
				this.fkinfolist();  
			}else if(this.type==2){
				this.basicmonitorlist();
			}
		},
	},
	computed:{
		list_update(){  
			return this.$store.state.shenqing
		}
	},
	watch:{
		list_update(newer,older){ 
			if(newer!=older){
				console.log('数据更新')
				this.list=[];
				this.serviceindex(); 
			}
		}
	},
	components:{
		 
	}
}
</script>

<style scoped lang="less">
	.page{
		height: 100%;
	}
	.list-wrap{
		padding-top: 20rpx;
		.item{ 
			display: flex;
			padding:20rpx;
			margin-bottom: 20rpx;
			background:#fff; 
			.info{				
				flex-grow: 2;
				.name{
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}
				.params{
					display: flex;
					font-size:30rpx;
					color:#999;
					.text{
						display: flex;
						align-items: center;
						margin-bottom:8rpx;
						.label{
							width: 150rpx;
						}
					}
				}
			}
		}
	}
	
	.footer{
		height: 150rpx;
		.fix-wrap{
			height: 150rpx;
			background: none;
			border: 0 none;
		}
		.btn{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 96%;
			height: 90rpx;
			margin: 20rpx auto;
			background: #00aa7f;
			border-radius: 8rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>
